<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Kylo</title>
  <link rel="stylesheet" href="bower_components/angular-material/angular-material.min.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
  <!-- Material Font Icons (  <md-icon ... >icon_name </md-icon> -->
  <link rel="stylesheet" href="js/vendor/material-icons/material-icons.css"/>
  <link rel="stylesheet" href="js/vendor/material-design-icons/css/material-design-iconic-font.min.css"/>
  <link rel="stylesheet" href="js/common/accordion-menu/accordion.css">
  <link rel="stylesheet" href="assets/theme.css">
  <link rel="stylesheet" href="assets/app.css">
  <link rel="stylesheet" href="assets/feed-mgr.css">
  <link rel="stylesheet" href="assets/ops-mgr.css">
  <link rel="stylesheet" href="assets/drag-and-drop-lists.css"/>
  <link rel="stylesheet" href="js/vendor/ment.io/styles.css"/>

  <script src="bower_components/core.js/client/shim.min.js"></script>
  <script src="js/vendor/tern/plugin/acorn.js"></script>
  <script src="js/vendor/tern/plugin/acorn_loose.js"></script>
  <script src="js/vendor/tern/plugin/walk.js"></script>
  <script src="js/vendor/tern/plugin/polyfill.js"></script>
  <script src="js/vendor/tern/lib/signal.js"></script>
  <script src="js/vendor/tern/lib/tern.js"></script>
  <script src="js/vendor/tern/lib/def.js"></script>
  <script src="js/vendor/tern/lib/comment.js"></script>
  <script src="js/vendor/tern/lib/infer.js"></script>
  <script src="js/vendor/tern/plugin/doc_comment.js"></script>

  <link rel="apple-touch-icon" sizes="180x180" href="assets/images/favicons/apple-touch-icon.png">
  <link rel="icon" type="image/png" href="assets/images/favicons/favicon-32x32.png" sizes="32x32">
  <link rel="icon" type="image/png" href="assets/images/favicons/favicon-16x16.png" sizes="16x16">
  <link rel="manifest" href="assets/images/favicons/manifest.json">
  <link rel="mask-icon" href="assets/images/favicons/safari-pinned-tab.svg" color="#ec881d">
  <meta name="apple-mobile-web-app-title" content="Kylo">
  <meta name="application-name" content="Kylo">

  <script src="node_modules/zone.js/dist/zone.min.js?main=browser"></script>
  <script src="node_modules/systemjs/dist/system.js"></script>
  <script src="js/systemjs.config.js"></script>
  <script>
    System.import("main.js");
  </script>
</head>
<body ng-cloak layout-fill>
<div ng-controller="IndexController as mc" layout="row" flex layout-fill>
  <div layout="row">
    <kylo-side-nav layout="row"></kylo-side-nav>
  </div>
  <div flex layout="column" tabIndex="-1" role="main" layout-fill style="background-color:#F9F9F9;">
    <add-button></add-button>
    <md-toolbar layout="row" class="md-whiteframe-z1 page-header" layout-align="space-between center">
      <div class="md-toolbar-tools">
        <md-button class="menu toggle-side-nav" ng-hide="mc.isSideNavHidden()" ng-click="mc.toggleSideNavList()" aria-label="Show Menu">
          <ng-md-icon icon="menu"></ng-md-icon>
        </md-button>

        <ui-router-breadcrumbs style="padding-left:25px;" displayname-property="data.displayName" template-url="js/common/ui-router-breadcrumbs/uiBreadcrumbs.tpl.html" flex md-truncate></ui-router-breadcrumbs>

        <div layout="row" layout-fill layout-align="center" flex hide-xs class="global-search-container" ng-show="mc.allowSearch">
          <ng-md-icon icon="search"></ng-md-icon>
          <md-input-container class="condensed-no-float md-block global-search" md-no-float style="margin-top:8px;margin-bottom:-15px;" flex>
            <input ng-model="mc.searchQuery" ng-keypress="mc.onSearchKeypress($event)" class="global-search-input" placeholder='{{"views.main.search-input" | translate}}' style="color:white">
          </md-input-container>
          <md-button ng-click="mc.search()">{{"views.main.search-btn" | translate}}</md-button>
        </div>

        <span flex></span>

        <div layout="row" layout-align="start start">
          <notification-menu></notification-menu>
          <kylo-options class="ng-isolate-scope"></kylo-options>
        </div>
      </div>
    </md-toolbar>

    <md-content flex id="content" md-scroll-y class="{{mc.currentState.name}}" scroll>
      <div ui-view="content" class="main-content"></div>
    </md-content>
  </div>
</div>
</body>
</html>
